<?php include_once"header.php" ?>

        <div class="tm-blog-img-container">
            
        </div>

        <section class="tm-section">
            <div class="container-fluid">
                <div class="row">

                    <div class="col-xs-12 col-sm-12 col-md-8 col-lg-9 col-xl-9">
                        <div class="tm-blog-post">
                            <h3 class="tm-gold-text" id="title"></h3>
                            <p id="author"></p>
                            <img src="uploads/tm-img-310x180-1.jpg" alt="Image" class="img-fluid tm-img-post" id="img">
                            <p id="content"></p>
                        </div>
                        
                        <div class="row tm-margin-t-big" id='list'>
                            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">

                                <div class="tm-content-box">
                                    <img src="uploads/tm-img-310x180-1.jpg" alt="Image" class="tm-margin-b-30 img-fluid">
                                    <h4 class="tm-margin-b-20 tm-gold-text">Lorem ipsum dolor #1</h4>
                                    <p class="tm-margin-b-20">Aenean cursus tellus mauris, quis
                                    consequat mauris dapibus id. Donec
                                    scelerisque porttitor pharetra</p>
                                    <a href="#" class="tm-btn text-uppercase">Detail</a>    
                                </div>  

                            </div>

                            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">

                                <div class="tm-content-box">
                                    <img src="uploads/tm-img-310x180-2.jpg" alt="Image" class="tm-margin-b-30 img-fluid">
                                    <h4 class="tm-margin-b-20 tm-gold-text">Lorem ipsum dolor #2</h4>
                                    <p class="tm-margin-b-20">Aenean cursus tellus mauris, quis
                                    consequat mauris dapibus id. Donec
                                    scelerisque porttitor pharetra</p>
                                    <a href="#" class="tm-btn text-uppercase">Read More</a>    
                                </div>  

                            </div>

                            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">

                                <div class="tm-content-box">
                                    <img src="uploads/tm-img-310x180-3.jpg" alt="Image" class="tm-margin-b-30 img-fluid">
                                    <h4 class="tm-margin-b-20 tm-gold-text">Lorem ipsum dolor #3</h4>
                                    <p class="tm-margin-b-20">Aenean cursus tellus mauris, quis
                                    consequat mauris dapibus id. Donec
                                    scelerisque porttitor pharetra</p>
                                    <a href="#" class="tm-btn text-uppercase">Detail</a>    
                                </div>  

                            </div>    
                        </div>
                        
                    </div>
                    
                </div>
                
            </div>
        </section>
        
<?php include_once"footer.php" ?>

<script type="text/javascript">
    //获取参数的方法
    function getParam(value){
        var index = location.href.indexOf('?');
        if(index == -1) return false;
        var paramsStr = location.href.substr(index+1);
        var paramsArr = paramsStr.split('&');

        for(let i = 0; i < paramsArr.length; i++) {
            var paramArr = paramsArr[i].split('=')
            if(paramArr[0] == value) {
                return  paramArr[1]
            }
        }
        return false;

    }

    $(function(){
        var id = getParam('id');
        if(!id) location.href = 'index.php';

        //博客输出
        $.ajax({
            url: 'api/search.php',
            type: 'get',
            dataType: 'json',
            data: { action: 'one_blog', limit: 1, id: id},
            success:function(data){
                dt = data.data[0];
                console.log(dt);
                $('#title').empty().append(dt.art_title);
                $('#author').empty().append(dt.art_author);
                $('#content').empty().append(dt.art_content);
                $('#img').attr('src','uploads/'+dt.art_img);
            }
        })

        //博客列表
        $.ajax({
          url:'api/search.php',
          type:'get',
          dataType:'json',
          data:{action:'index_blog',limit:3},
          success:function(data){
            // console.log(data);
            var dt = data.data;
            var str = '';
            $.each(dt,function(k,v){
              str +='<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">'
              str +='    <div class="tm-content-box">'
              str +='      <img src="uploads/'+ v['art_img'] +'" alt="Image" class="tm-margin-b-20 img-fluid">'
              str +='      <h4 class="tm-margin-b-20 tm-gold-text">' + v['art_title'] + '</h4>'
              str +='      <p class="tm-margin-b-20">' + v['art_desc'] + '</p>'
              str +='      <a href="blog.php?id='+ v['art_id'] +'" class="tm-btn text-uppercase">Read More</a>'
              str +='    </div>'
              str +='  </div>' 
            });
            $('#list').empty().append(str);
          }
        })
    })
</script>